<script setup lang="ts">
defineProps<{
  title: string
  artist: string
  playCount?: number
}>()

// 格式化播放次数
const formatPlayCount = (count: number) => {
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}
</script>

<template>
  <div class="info-section">
    <h1 class="song-title">{{ title }}</h1>
    <h2 class="artist-name">{{ artist }}</h2>
    <div class="play-count" v-if="playCount">
      <i class="play-icon"></i>
      <span>播放量: {{ formatPlayCount(playCount) }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.info-section {
  .song-title {
    font-size: 32px;
    color: var(--primary-color);
    margin-bottom: 12px;
  }
  
  .artist-name {
    font-size: 18px;
    color: var(--secondary-color);
    margin-bottom: 16px;
  }

  .play-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: color-mix(in srgb, var(--bgc-color-2) 80%, transparent);
    border-radius: 12px;
    font-size: 13px;
    color: var(--primary-color);
    opacity: 0.85;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
    
    .play-icon {
      width: 14px;
      height: 14px;
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"/></svg>');
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 0.85;
    }

    span {
      font-weight: 500;
      color: var(--primary-color);
      letter-spacing: 0.5px;
    }
  }
}
</style> 